<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.js"></script>

    <script src="js/echarts.min.js"></script>

    <script src="js/getUrlParam.js"></script>
    <script src="/jquery-3.6.0.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/jspdf.min.js"></script>

    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body{
            background: #37aba8;
        }
        #the1{
            background: white;
            margin-left: 120px;
            margin-right: 120px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
<div id="the1">
    <div style="border:3px solid #a014cb;margin: 20px;" >
        <div id="main" style="width: 1200px;height:700px;text-align: center"></div>
        <div style="margin-left: 100px;margin-right: 100px">
            <h1 style="text-align: center">性格分析</h1>
            <a>
                <div style="text-align: center"><h3 style="color: red">红色</h3>
                积极乐观 情绪波动大起大落<br>
                真诚主动 开玩笑不分场合<br>
                善于表达 疏于兑现承诺<br>
                富有感染力 这山望着那山高<br></div>
                <h4>【性格优势】：</h4>
                <h5>作为个体：</h5>高度乐观的积极心态。喜欢自己，也容易接纳别人。把生命当作值得享受的经验。喜欢新鲜、变化和刺激。经常开心，追求快乐。情感丰富而外露。自由自在，不受拘束。喜欢开玩笑和调侃。别出心裁，与众不同。表现力强。容易受到人们的喜欢和欢迎。生动活泼，好奇心强。
                <h5>沟通特点：</h5>才思敏捷，善于表达。喜欢通过肢体上的接触传达亲密情感。容易与人攀谈。发生冲突时，能直接表白。人越多越亢奋。演讲和舞台表演的高手。乐于表达自己的看法。
                <h5>作为朋友：</h5>真诚主动，热情洋溢。喜欢交友，善于与陌生人互动。擅长搞笑，是带来乐趣的伙伴。容易原谅自己和别人，不记仇。富有个人魅力。乐于助人。有错就认，很快道歉。喜欢接受别人的肯定和不吝赞美。
                <h5>对待工作和事业：</h5>工作主动，寻找新任务。富有感染力，能够吸引他人参与。激发团队的热情合作心和进取心，重视团队合作的感觉。令人愉悦的工作伙伴。完成短期目标时，极富爆发力。信任他人。善于赞美和鼓励，是天生的激励者。不喜欢太多的规定束缚，富有创意。工作以活泼化、丰富化的方式进行。反应快，闪电般开始。
                <h4>【性格过当】：</h4>
                <h5>作为个体:</h5>情绪波动大起大落。变化无常，随意性强。鲁莽冲动，轻信他人，容易上当受骗。虚荣心强，不肯吃苦，贪图享受。喜欢走捷径，虎头蛇尾，不能坚持。粗心大意，杂乱无章。不肯承担责任，期待有别人为自己的人生负责。缺乏自控，毫无纪律。容易原谅自己，不吸取教训。不稳定和散漫。拒绝长大。借放纵来麻痹自己的痛苦和烦恼，而不去认真思考生命的本质。
                <h5>沟通特点：</h5>说话少经大脑思考，脱口而出。对于严肃和敏感的事情也会开玩笑。炫耀自己，夺人话题。注意力分散，不能专注倾听，插话。吹牛不打草稿，疏于兑现承诺。忘记别人说过什么，自己讲过的话也经常重复。口无遮拦，不保守秘密。不可靠，光说不练。夸大吹嘘自己的成功。
                <h5>作为朋友：</h5>缺少分寸，过度的玩笑和热情。只想当主角。谈论自己感兴趣的话题，对和自己无关的话题心不在焉。插嘴打断别人谈话。健忘多变。经常会忘记老朋友。有极强的依赖性，脆弱而不能独立。好心办坏事。
                <h5>对待工作事业：</h5>跳槽频率高，这山望着那山高。没有规划，随意性强。没有焦点，把精力分散在太多的不同方向。过高估计了自己的能力。觉得没有必要为未来做准备。不肯花更大的精力和幕后工作的勤奋代价，来获取更高的殊荣。不切实际地希望所有的工作都要有趣味。很难全神贯注，经常性地走神。异想天开，难以预料。
            </a>
            <a>
                <div style="text-align: center"><h3 style="color: yellow">黄色</h3>
                行动迅速 死不认错<br>
                善于忠告 控制欲强<br>
                不感情用事 咄咄逼人<br>
                    坚持不懈 容易发怒<br></div>
                <h4>【性格优势】：</h4>
                <h5>作为个体：</h5>不达目标，誓不罢休。不停地给自己设定目标以推动前进。把生命当成竞赛。行动迅速，活力充沛。意志坚强。自信、不情绪化，而且非常有活力。坦率，直截了当，一针见血。强烈的进取心，居安思危。独立性强。有强烈的求胜欲。不畏强权并敢于冒险。不易气馁，不在乎外界的评价，坚持自己所选择的道路和方向。危难时刻挺身而出。讲究速度和效率。敢于接受挑战并渴望成功。
                <h5>沟通特点：</h5>以务实的方式主导会谈。喜欢主导整个事情进行的方式。能够直接抓住问题的本质。说话用字简明扼要，不喜欢拐弯抹角。不受情绪干扰和控制。
                <h5>作为朋友：</h5>给予解决问题的方法，而非纠缠在过去。迅速提出忠告和方向。直言不讳地提出建议。
                <h5>对待工作和事业：</h5>动作干净利落，讲求效率。能够承担长期高强度的压力。强烈的目标趋向，善于设定目标。高瞻远瞩，有全局观念。善于委派工作。坚持不懈，促成活动。掌握重点执行。行事作风明快。天生的领导者和富有组织能力。竞争越强，精力越旺，愈挫愈勇。寻求实际的解决方法。以结果和完成任务为导向，并且高效率。善于快速决策并处理所遇到的一切问题。富有责任感。
                <h4>【性格过当】：</h4>
                <h5>作为个体：</h5>自己永远是对的，死不认错。趾高气扬，霸道。只关注自己的感受，不体贴别人的心情和想法。以自我为中心，自私倾向。霸道。脾气暴躁，容易发怒。缺少同情心。傲慢自大，目中无人。经常紧绷自己的情绪。在情绪不佳或有压力的时候，经常会不可理喻与独断专行。不喜欢受群体所规范约束,打破既定规则且自己不遵守规则。
                <h5>沟通特点：</h5>喜欢争辩和冲突。铁石心肠，对情绪表现冷淡。粗线条，简单粗暴。毫无敏感，无力洞察他人内心和理解他人所想。抗拒批评，严酷且自以为是的审判者。缺乏亲密分享的能力。缺乏耐心，是非常糟糕的倾听者。态度尖锐严厉，批判性强。容易让他人的工作或生活步调紧张。不习惯赞美别人。说话有时咄咄逼人。控制欲强。不太能体谅他人，对行事模式不同的人缺少包容度。
                <h5>作为朋友：</h5>大多时候仅保持理性的友谊。讨厌与犹豫不决、能力弱的人互动。试图控制和影响大家的活动，希望他人服从自己而非配合别人。除了工作内容，很少交谈其它话题。情感上习惯与人保持一定的距离。很少对人流露出直接诚挚的关怀。需要你的时候才找你。为别人做主。
                <h5>对待工作和事业：</h5>生活在无尽的工作当中而不是人群中。数量远比质量重要。目标没有完成时，容易发怒且迁怒于人。寻求更多的权力，有极强的控制欲。拒绝为自己和他人放松。完成工作第一，人的事情第二。为了自己的面子，不妥协且毫不认错。对于竞争结果过分关注而忽略过程中的乐趣。武断，刚愎自用且一意孤行。很难慢下来，缺少生命乐趣的工作狂。未明察就急于改变，急于求成。

            </a>
            <a>
                <div style="text-align: center"> <h3 style="color: deepskyblue">蓝色</h3>
                思想深邃 情感脆弱<br>
                默默关怀他人 喜好批判和挑剔<br>
                敏感而细腻 不主动与人沟通<br>
                    计划性强 患得患失<br></div>
                <h4>【性格优势】：</h4>
                <h5>作为个体：</h5>严肃的生活哲学。思想深邃，独立思考而不盲目从众。沉默寡言，老成持重。注重承诺，可靠安全。谨慎而深藏不露。坚守原则，责任心强。遵守规则，井井有条。深沉有目标的理想主义。敏感细腻。高标准，追求完美。谦和稳健。善于分析，富有条理。待人忠诚，富有自我牺牲精神。深思熟虑，三思而后行。坚韧执着。
                <h5>沟通特点：</h5>享受敏感而有深度的交流。设身处地地体会他人。能记住谈话时共鸣的感情和思想。喜欢小群体交流的思想碰撞。关注谈话的细节。
                <h5>作为朋友：</h5>默默地为他人付出以表示关切和爱。对友谊忠诚不渝。真诚关怀朋友的境遇，善于体贴他人。能够记得特殊的日子。遭遇难关时，极力给予鼓舞安慰。很少向他人表达内心的看法。经常扮演解决分析问题的角色。
                <h5>对待工作和事业：</h5>强调制度、程序、规范、细节和流程。做事之前首先计划且严格按照计划去执行。喜欢探究及根据事实行事。尽忠职守，追求卓越。高度自律。喜欢用表格、数字的管理来验证效果。注重承诺。一丝不苟地执行工作。
                <h4>【性格过当】：</h4>
                <h5>作为个体：</h5>高度负面的情绪化。猜忌心重，不信任他人。太在意别人的看法和评价，容易被负面评价中伤。容易沮丧，悲观消极。陷于低落的情绪无法自拔。情感脆弱抑郁，有自怜倾向。杞人忧天，庸人自扰。最容易的抑郁症患者。当别人轻易成功时，会因自己的努力付出却不如他人而心生嫉妒。过于阴沉的面孔，让人感觉压抑，不易接近。
                <h5>沟通特点：</h5>不知不觉地说教和上纲上线。原则性强，不易妥协。强烈期待别人具有敏感度和深度能够理解自己。以为别人能够读懂自己的心思。不太主动与人沟通。不喜欢制造困扰麻烦给别人，也讨厌别人制造困扰麻烦给自己。要真诚开放心胸与人互动会比较难。习惯以防卫的状态面对别人。
                <h5>作为朋友：</h5>过度敏感，有时很难相处。强烈的不安全感。远离人群。喜好批判和挑剔。吝于宽恕。经常怀疑别人的话，不容易相信他人。对待工作和事业对自己和他人常寄予过高而且不切实际的期望。过度计划和过度绸缪。患得患失，行动缓慢。较真，挑剔他人及自己的表现。专注于小细节，因小失大。吝啬表扬，强烈的形式主义。容易被不理想的成绩击垮斗志。墨守成规，死板教条不懂变通。为了维护原则缺乏妥协精神。
            </a>
            <a>
                <div style="text-align: center"><h3 style="color: lawngreen">绿色</h3>
                温柔祥和 拒绝改变<br>
                为他人考虑 胆小被动<br>
                心平气和 没有主见<br>
                    善于协调 缺乏创意<br></div>
                <h4>【性格优势】：</h4>
                <h5>作为个体：</h5>爱静不爱动，有温柔祥和的吸引力和宁静愉悦的气质。和善的天性，做人厚道。追求人际关系的和谐。奉行中庸之道，为人稳定低调。遇事以不变应万变，镇定自若。知足常乐，心态轻松。追求平淡的幸福生活。有松弛感，能融入所有的环境和场合。从不发火，温和、谦和、平和三和一体。做人懂得“得饶人处且饶人”。追求简单随意的生活方式。沟通特点以柔克刚，不战而屈人之兵。避免冲突，注重双赢。心平气和且慢条斯理。善于接纳他意见。最佳的倾听者，极具耐心。擅长让别人感觉舒适。有自然和不经意的冷幽默。松弛大度，不急不徐。
                <h5>作为朋友：</h5>从无攻击性。富有同情和关心。宽恕他人对自己的伤害。能接纳所有不同性格的人。和善的天性及圆滑的手腕。对友情的要求不严苛。处处为别人考虑，不吝付出。与之相处轻松自然又没有压力。最佳的垃圾宣泄处，鼓励他们的朋友多谈自己。从不尝试去改变他人。
                <h5>对待工作和事业：</h5>高超的协调人际关系的能力。善于从容地面对压力。巧妙地化解冲突。能超脱游离政治斗争之外，没有敌人。缓步前进以取得思考空间。注重人本管理。推崇一种员工都积极参与的工作环境。尊重员工的独立性，从而博得人心和凝聚力。善于为别人着想。以团体为导向。创造稳定性。用自然低调的行事手法处理事务。
                <h4>【性格过当】：</h4>
                <h5>作为个体：</h5>按照惯性来做事，拒绝改变，对于外界变化置若罔闻。懒洋洋的作风，原谅自己的不思进取。懦弱胆小，纵容别人欺压自己。期待事情会自动解决，完全守望被动。得过且过。无原则地妥协，而无法促使他们采取负责任的解决态度。逃避问题与冲突。太在意别人反应，不敢表达自己的立场和原则。
                <h5>沟通特点：</h5>一拳打在棉花上，毫无反应。没有主见，把压力和负担通通转嫁到他人身上。不会拒绝他人，给自己和他人都带来无穷麻烦。行动迟钝，慢慢腾腾。避免承担责任。
                <h5>作为朋友：</h5>不负责任的和稀泥。姑息养奸的态度。压抑自己的感受以迁就别人。期待让人人满意，对自己的内心不忠诚。没有自我，迷失人生的方向。缺乏激情。漠不关心，惰于参与任何活动。
                <h5>对待工作和事业：</h5>安于现状，不思进取。乐于平庸，缺乏创意。害怕冒风险，缺乏自信。拖拖拉拉。缺少目标。缺乏自觉性。懒惰而不进取。宁愿做旁观者不肯做参与者。
            </a>
        </div>
    </div>
</div>

<div style="width: auto;text-align: right">
    <i class="layui-icon layui-icon-download-circle" style="font-size: 50px; color: #ec0c0c;" onclick="download()"></i>
<!--    <button style="background: cyan;width: 100px;height: 30px" onclick="download()">下载ptf</button>-->
</div>
</body>`
<script>
    layui.use(['form', 'laydate', 'layer'], function () {
        var laydate = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //加载数据
        Getdatachart();
    });

    function Getdatachart() {
        var id = UrlParm.parm("id");
        $.ajax({
            data: {"id":id},
            url: "/resultOne/getOne",
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                    GetChart(result.data);
                }
            }
        });
    }

    function GetChart(date) {
        const chartDom = document.getElementById('main');
        const myChart = echarts.init(chartDom);
        option = {
            title: {
                text: '性格分析图',
                subtext: '个人性格分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: [
                    '红',
                    '黄',
                    '蓝',
                    '绿'
                ]
            },
            color: ['#ec0c0c', '#efed2f', '#12c2e7', '#40f633'],
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '个人性格',
                    type: 'pie',
                    radius: [40, 140],
                    center: ['50%', '50%'],
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 40
                    },

                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: date
                    //     [
                    //     { value: 30, name: '红' },
                    //     { value: 58, name: '黄' },
                    //     { value: 26, name: '蓝' },
                    //     { value: 20, name: '绿' }
                    // ]
                }
            ],
        };
        option && myChart.setOption(option);
        window.onresize = myChart.resize;
    }

    function download(){
        const element = $("#the1"); // 这个dom元素是要导出pdf的div容器
        var w = element.width(); // 获得该容器的宽
        var h = element.height(); // 获得该容器的高
        var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
        var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
        const canvas = document.createElement("canvas");
        var abs = 0;
        var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
        var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
        if(win_o>win_i){
            abs = (win_o - win_i)/2; // 获得滚动条长度的一半
        }
        canvas.width = w * 2; // 将画布宽&&高放大两倍
        canvas.height = h * 2;
        const context = canvas.getContext("2d");
        context.scale(2, 2);
        context.translate(-offsetLeft-abs,-offsetTop);
        // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
        // translate的时候，要把这个差值去掉
        html2canvas(element[0]).then(function(canvas) {
            const contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);

            var pdf = new jsPDF('', 'pt', 'a4');

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else { // 分页
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('性格测试结果.pdf');
        })
    }
</script>
</html>